/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import { ScrollView, Image, AppRegistry, Text, TextInput, View } from 'react-native';

 class FixedDimensionsBasics extends Component {
    render() {
        return (
            <View>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
                <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
            </View>
        );
    }
 }

class DimensionsBasics2 extends Component {
    render() {
        return (
            <View>
                <View style={{width: 150, height: 150, backgroundColor: 'powderblue'}} />
                <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
                <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
            </View>
        );
    }
 }

class FlexDimensionsBasics2 extends Component {
    render() {
        return (
            // 试试去掉父View中的`flex: 1`。
            // 则父View不再具有尺寸，因此子组件也无法再撑开。
            // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
            <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'powderblue'}} />
                <View style={{flex: 2, backgroundColor: 'skyblue'}} />
                <View style={{flex: 3, backgroundColor: 'steelblue'}} />
            </View>
        );
    }
 }

class PizzaTranslator extends Component {
    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    render() {
        return (
            <View style={{padding: 10}}>
                <TextInput
                    style={{height: 40}}
                    placeholder="Type here to translate!"
                    onChangeText={(text) => this.setState({text})}
                />
                <Text style={{padding: 10, fontSize: 42}}>
                    {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
                </Text>
            </View>
        );
    }
}

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
    render() {
        let pic = {
            uri: 'http://p0.ifengimg.com/a/2018_16/932c18c85b044e7_size32_w541_h544.jpg'
        };
        return(
            <ScrollView>
                <Text style={{fontSize:16}}>Scroll me plz</Text>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Text style={{fontSize:16}}>Scroll me plz</Text>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Text style={{fontSize:16}}>Scroll me plz</Text>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Text style={{fontSize:16}}>Scroll me plz</Text>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Text style={{fontSize:16}}>Scroll me plz</Text>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
                <Image  source={pic} style={{width: 193, height: 110}}/>
            </ScrollView>
        );
    }
}

// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
// AppRegistry.registerComponent('RNProject', () => PizzaTranslator);